<template>
  <view :style="{ width: `${props.width}rpx`, height: `${props.height}rpx` }">
    <!-- #ifdef APP-NVUE -->
    <!-- <gcanvas
      v-if="show"
      :id="canvasId"
      :ref="canvasId"
      class="canvas"
      :style="{ width: `${tmcvOpts.width}rpx`, height: `${tmcvOpts.height}rpx` }"
    >
    </gcanvas> -->
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN || MP-ALIPAY || MP-QQ -->
    <canvas
      id="canvasId"
      :height="tmcvOpts.height"
      :width="tmcvOpts.width"
      type="2d"
      canvas-id="canvasId"
      class="canvas"
      :style="{ width: `${props.width}rpx`, height: `${props.height}rpx` }"
    ></canvas>
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN || MP-ALIPAY || MP-QQ || APP-NVUE -->
    <canvas
      :id="canvasId"
      :height="tmcvOpts.height"
      :width="tmcvOpts.width"
      :canvas-id="canvasId"
      class="canvas"
      :style="{ width: `${props.width}rpx`, height: `${props.height}rpx` }"
    ></canvas>
    <!-- #endif -->
  </view>
</template>

<script lang="ts" setup>
/**
 * render为画面绘制组件
 * @description 可以通过render组件对canvas组件进行操作并绘制相关内容。
 */
import { getCurrentInstance, onUnmounted, ref, onMounted, reactive } from 'vue'
import { tmCv } from './tmCv/index'

const emits = defineEmits(['onInit', 'touchend', 'touchstart', 'touchmove'])
const proxy = getCurrentInstance()?.proxy ?? null
const props = defineProps({
  width: {
    type: Number,
    default: 750,
  },
  height: {
    type: Number,
    default: 500,
  },
})

const canvasId = ref('canvasId')
const tmcvOpts = reactive({
  left: 0,
  top: 0,
  width: uni.upx2px(props.width),
  height: uni.upx2px(props.height),
})

/** 获取tmcv对象 */
async function getTmCv() {
  if (!proxy) return null
  const tmcv = new tmCv(proxy, canvasId.value, {
    width: tmcvOpts.width,
    height: tmcvOpts.height,
  })

  await tmcv.init()

  return tmcv
}

function save(tmcv: tmCv): Promise<string> {
  return new Promise((su, fa) => {
    if (!tmcv) {
      uni.showToast({ title: '未传递tmcv', icon: 'none' })
      fa('失败')
      return
    }

    // #ifdef APP-NVUE
    uni.showLoading({ title: '...' })
    // ctx.getImageData(0,0,props.width,props.height,function(res:imageData){
    // 	console.log(ArrayBufferToBase64(res.data).length)
    // 	fa(true)
    // 	uni.hideLoading()
    // })

    tmcv.ctx.toTempFilePath(
      0,
      0,
      tmcv.opts.width,
      tmcv.opts.height,
      tmcv.opts.width,
      tmcv.opts.height,
      'png',
      1,
      function (res) {
        uni.hideLoading()
        console.log(res.errMsg)
        if (res.errMsg == 'canvasToTempFilePath:ok') {
          su(res.tempFilePath)
        } else {
          fa(res.errMsg)
        }
      }
    )

    // #endif

    // #ifndef APP-NVUE
    console.log(proxy)
    uni.canvasToTempFilePath(
      {
        x: 0,
        y: 0,
        width: tmcv.opts.width,
        height: tmcv.opts.height,
        // #ifndef MP-ALIPAY
        canvasId: canvasId.value,
        // #endif
        canvas: tmcv.ctx,
        success: function (res) {
          // 在H5平台下，tempFilePath 为 base64
          su(res.tempFilePath)
        },
        fail: (res) => {
          console.error(res)
          fa(res)
        },
      },
      proxy
    )

    // #endif
  })
}

defineExpose({ getTmCv, saveImg: save })
</script>

<style></style>
